<template>
  <div>
    <el-container>
      <!-- 导航栏 -->
      <el-header class="header" style="height: 40px">
        <Header />
      </el-header>
      <!-- logo -->
      <div class="header-logo" style="height: 100px">
        <div class="logoSteps">
          <div class="logo">
            <el-link href="/" :underline="false">
              <img src="../../assets/logo.png" width="150" height="80" />
            </el-link>
          </div>
          <div class="steps">
            <el-steps :space="200" :active="2">
              <el-step title="购物车"></el-step>
              <el-step title="核对订单信息"></el-step>
              <el-step title="成功提交订单"></el-step>
            </el-steps>
          </div>
        </div>
      </div>

      <!-- 确定订单列表 -->
      <el-main class="order-info">
        <Order />
      </el-main>

      <el-main class="pledge">
        <img
          src="https://img.alicdn.com/tfs/TB1I8svRXXXXXcUXpXXXXXXXXXX-990-100.jpg"
          style="width: 1100px; height: 140px"
        />
      </el-main>
      <el-footer class="footer">
        <div class="beian">
          <div class="webset">
            网站地址：{{ baseInfo.url }} 电话:{{ baseInfo.phone }} 邮箱:
            {{ baseInfo.mailbox }}
          </div>
          <div class="">
            {{ baseInfo.websiteICP }} | {{ baseInfo.putOnRecords }} |
            {{ baseInfo.address }}
          </div>
          <div>Copyright © 2021-8-24 |优优youyou.xiatianyu.cn版权所有</div>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>
<style lang="scss" scoped>
.header {
  background-color: #ffffff;
  padding: 0px;
}
.header-logo {
  display: flex;
  // border: 1px solid;
  .logoSteps {
    display: flex;
    width: 100vw;
    justify-content: space-between;
    .logo {
      margin-left: 160px;
    }
    .steps {
      width: 500px;
      margin: 30px 0px 0px;
    }
  }
}
.order-info {
  min-height: 800px !important;
  // margin: 0 80px;
  // border: 1px solid;
  padding: 0px;
  display: flex;
  justify-content: center;
  margin-bottom: 150px;
  overflow: hidden;
}
.pledge {
  border-top: 1px solid darkgray;
  // border-bottom: 1px solid darkgray;
  height: 180px;
  background-color: #fff;
  // padding-left: 200px;
  overflow: hidden;
  text-align: center;
}
.footer {
  // margin-top: 100px;
  background-color: #000000;
  height: 100px !important;
  overflow: hidden;
  border-top: 3px solid #ff0036;
  .beian {
    text-align: center;
    color: #a4a4a4;
    font-size: 12px;
    margin-top: 20px;
  }
}
</style>

<script>
import Header from '../header'
import Order from './order.vue'
import { getWebset } from '../../api/webset'

export default {
  components: {
    Header,
    Order
  },
  data () {
    return {
      baseInfo: {
        url: '',
        phone: '',
        mailbox: '',
        introduce: '',
        address: '',
        websiteICP: '',
        putOnRecords: ''
      }
    }
  },
  mounted () {
    getWebset(1).then(({ data }) => {
      console.log(data)
      this.baseInfo = data.data
    })
  }
}
</script>
